<template>
    <div class="editExperienceClass">
        <el-dialog title="编辑体验班" 
        width='60%'
        :modal=false
        :close-on-click-modal=false
        :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="班级名称：" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="销售：" :label-width="formLabelWidth">
                    <el-select v-model="form.grade">
                        <el-option label="销售1" value="销售1"></el-option>
                        <el-option label="销售2" value="销售2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="线下中教：" :label-width="formLabelWidth">
                    <el-select v-model="form.grade">
                        <el-option label="线下中教1" value="线下中教1"></el-option>
                        <el-option label="线下中教2" value="线下中教2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级备注：" :label-width="formLabelWidth">
                    <el-input v-model="form.qq" auto-complete="off"></el-input>
                </el-form-item>
                <addtoClass :classtype='classtype'></addtoClass>
            </el-form>
            <!-- 添加成功后展示 -->
            <el-table
                :data="tableData"
                stripe 
                size="mini"
                border resizable
                style="width: 100%;margin-left:60px;"
                max-height="656">
                <el-table-column
                    label="学员账号"
                    prop="stuid"
                    :align="align"
                    :width="columWidth">
                </el-table-column>
                <el-table-column
                    label="学员姓名"
                    prop="stuname"
                    :align="align"
                    :width="columWidth">
                </el-table-column>
                <el-table-column
                    label="学员年龄"
                    prop="stuage"
                    :align="align"
                    :width="columWidth">
                </el-table-column> 
                <el-table-column
                    label="学员性别"
                    prop="stusex"
                    :align="align"
                    :width="columWidth">
                </el-table-column>
                <el-table-column
                    label="学员状态"
                    prop="stusta"
                    :align="align"
                    :width="columWidth">
                </el-table-column>
                <el-table-column
                    label="录入人"
                    prop="wriname"
                    :align="align"
                    :width="columWidth">
                </el-table-column>
                <el-table-column
                    label="注册时间"
                    prop="writime"
                    :align="align"
                    :width="columWidth">
                </el-table-column>                  
                <el-table-column 
                    fixed="right" 
                    :align="align"
                    min-width="200"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">移出班级</el-button>
                        <el-button
                            size="mini"
                            type="info" plain
                            @click="handleEdit(scope.$index, scope.row)">档案</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button class="dialog_close" @click="dialogFormVisible=false">取 消</el-button>
                <el-button class="dialog_confirm" type="primary" @click="dialogFormVisible=false">确 定</el-button>
            </div>
        </el-dialog>      
    </div>
</template>
<script>
import addtoClass from '../buttons/addToClass'
export default {
    components:{
        addtoClass
    },
    props:['dialogFormVisible'],
    data(){
        return{
            classtype:'experience',
            formLabelWidth: '160px',
            columWidth:140,
            align:'center',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData: [
                   {
                        stuid: '12354564564',
                        stuname: '王小虎',
                        stuage: '15',
                        stusex: '女',
                        stusta: '注册未联系',
                        wriname: '销售一',
                        writime:'2018-05-20'
                    }, 

            ],
        }
    },
    watch:{
        //监听isDialogVisible变更后对外发送事件通知，比如关闭弹窗时值变为false,通过$emit通知父组件的getDialogVisible，根据setDialogVisible方法去设置父组件的值
        dialogFormVisible(){
            this.$emit('getDialogVisible', this.dialogFormVisible)
        }
    }
    
}
</script>

